<template>
  <div class="dflex justify-between">
    <div class="dflex">
      <img :src="Arr3" alt="" srcset="">
      <div class="ml-2">训练数据</div>
    </div>
    <el-icon @click="appTrain">
      <Plus />
    </el-icon>
  </div>
  <div class="dflex justify-between">
    <div class="arrIcon dflex ">
      <img :src="Arr" alt="" srcset="">
      <div class="f14333">12321</div>
    </div>
    <div>
      <img :src="Arr1" alt="" srcset="">
      <img :src="Arr2" alt="" srcset="">
    </div>
  </div>

  <div class="dflex justify-between">
    <div class="dflex">
      <img :src="Arr3" alt="" srcset="">
      <div class="ml-2">记忆体</div>
    </div>
    <el-icon @click="appMemory">
      <Plus />
    </el-icon>
  </div>

  <!-- 添加训练模型 -->
  <el-dialog v-model="trainVisible" title="添加训练数据" width="30%">
    <div>
      <el-select v-model="optionsVal" multiple collapse-tags collapse-tags-tooltip placeholder="请选择训练模型"
        style="width: 100%">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="trainVisible = false">取消</el-button>
        <el-button type="danger" @click="trainVisible = false">
          添加
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- end -->

  <!-- 添加记忆体 -->
  <el-dialog class="memoryModel" v-model="memoryVisible" title="添加训练数据" width="30%">
    <!--知识库from -->
    <el-form ref="ruleFormRef" :model="form" label-position="top">
      <el-form-item prop="v1" :rules="[
        { required: true, message: '请输入问题' },
      ]">
        <el-input v-model="form.v1" autocomplete="off" placeholder="请输入问题" />
      </el-form-item>
      <el-form-item prop="v2" :rules="[
        { required: true, message: '请输入答案' },
      ]">
        <el-input v-model="form.v2" type="textarea" placeholder="请输入答案" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="danger" @click="submitForm(ruleFormRef)">
          新增
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import Arr from "@/assets/docs/arr.svg";
import Arr1 from "@/assets/docs/arrow_1.svg";
import Arr2 from "@/assets/docs/arrow_2.svg";
import Arr3 from "@/assets/docs/arrow_3.svg";
const trainVisible = ref(false)
const memoryVisible = ref(false)

// 训练模型对话框
const appTrain = () => {
  trainVisible.value = true
}

// 记忆体对话框
const appMemory = () => {
  memoryVisible.value = true
}

// mock
const optionsVal = ref([])
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]

const form = reactive({
  v1: '',
  v2: '',
})

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log(valid, form, 'submit!')
    } else {
      console.log('error submit!')

      return false
    }
  })
}
</script>
<style lang="scss" scoped>
.arrIcon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 5px;
  background: #F9E8E9;
  text-align: center;
  line-height: 26px;
  margin: 20px 0;
}

img {
  cursor: pointer;
}

.el-icon {
  cursor: pointer;
}

.f14333 {
  margin-left: 10px;
}
</style>
